<template>
	<view>
		<!-- 地址 -->
		<navigator url="/pages/address/address?source=1" class="address-section">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top" v-if="addressData!=null&&addressData.id!=null&&addressData.id!=0">
						<text class="name"><text class="red">{{addressData.flag}}</text>{{addressData.name}} {{addressData.tel}}</text>
					</view>
					<text class="address" v-if="addressData.id!=0"><text></text>{{addressData.provinceName}}{{addressData.cityName}}{{addressData.countyName}}{{addressData.addressDetail}}{{addressData.area}}</text>
					<text class="address" v-if="addressData.id==0">请选择地址</text>
					<view class="userinfo">
						<text class="username">{{addressData.user}}</text>
						<text>{{addressData.mobile}}</text>
					</view>
				</view>
				<text class="yticon icon-you"></text>
			</view>

			<image class="a-bg" src=""></image>
		</navigator>

		<view class="goods-section">
			<view class="g-header b-b">
				<image class="logo" src="http://duoduo.qibukj.cn/./Upload/Images/20190321/201903211727515.png"></image>
				<text class="name" v-if="privateMakeRule!=null&&privateMakeRule!=undefined">{{privateMakeRule.authorName}}</text>
			</view>
		</view>

		<!-- 预约信息 -->
		<view class="c-list">
			<view class="e-header"><text class="tit">预约信息</text></view>
			<view class="c-row b-b">
				<text class="tit">预约项目</text>
				<view class="con-list">
					<view class="uni-list-cell-db">
						<picker @change="bindItemsChange" :value="itemIndex" :range="array">
							<view class="uni-input">{{itemName}}</view>
						</picker>
					</view>
				</view>
			</view>

			<view class="c-row b-b">
				<text class="tit">最低起价</text>
				<view class="bz-list con"><text>{{itemMinPrice}}</text></view>
			</view>
			<view class="c-row b-b">
				<text class="tit">定金金额</text>
				<view class="bz-list con"><text>{{itemDingMoney}}</text></view>
			</view>
			<view class="c-row b-b">
				<text class="tit">项目周期</text>
				<view class="bz-list con"><text>{{itemFinishDays}}天</text></view>
			</view>
			<view class="c-row b-b">
				<text class="tit">交付时间</text>
				<view class="bz-list con">
					<picker mode="date" :value="privateDeliverDate" :start="ruleBeginTime" 
					:end="ruleEndTime"  @change="bindDateChange">
						<view class="uni-input">{{ privateDeliverDate }}</view>
					</picker>
					
<!-- 					<ruiDatePicker fields="day"
					 :start="privateMakeRule.beginTime" 
					 :end="privateMakeRule.endTime" 
					 :value="item.date+' '+item.time "
					 :begintime="item.time" 
					 :beginHourMinute="iniaYuyueStartHourMinute"  
					 :endtime="iniaYuyueEndHourMinute" 
					 @change="bindDateChange(item,$event)">
					 </ruiDatePicker> -->
					
				</view>
			</view>

			<view class="c-row b-b">
				<text class="tit">内容描述</text>
				<view class="bz-list con"><input class="ser-input" type="text" placeholder="输入内容描述" /></view>
			</view>
			<view class="c-row b-b">
				<text class="tit">特别备注</text>
				<view class="bz-list con"><input class="ser-input" type="text" placeholder="输入特别备注" /></view>
			</view>
<!-- 			<view class="c-row b-b">
				<view style="width: 150upx;">
					<text><a href="#">上传图片</a></text>
				</view>

				<view class="bz-list con">
					<image class="portrait" 
					src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" 
					mode="aspectFill"></image>
			    </view>
			</view> -->
<!-- 			 <view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<20">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<view class="btn">
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-red margin-tb-sm lg" @click="submit">确认</button>
				</view>
			</view> -->
			
			<view class="c-row b-b">
				<text class="tit">预约规则</text>
				<view class="bz-list con"><text>
				平台方负责线下撮合，并居间担保，三方以诚信为本。预约金按最低起价支付，
				最终费用增加部分在三方签署合同时确认。如果定制服务购买方和提供方
				未达成协议，平台方将退还所有费用给服务购买方。一旦双方签署协议，则平台方会收取相应的服务费用。
				平台方依照合同的执行情况，根据双方协商进行费用的结算支付。</text></view>
			</view>
		</view>

		 
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">定金金额</text>
				<text class="cell-tip">{{itemDingMoney}}</text>
			</view>
			<!-- <view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">{{itemShipCost}}</text>
			</view> -->
  
		</view>
		
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				<!-- <text class="price">{{itemDingMoney+itemShipCost}}</text> -->
				<text class="price">{{itemDingMoney}}</text>
			</view>
			<text class="submit" @click="submit">提交预订单</text>
		</view>
 
	</view>
</template>

<script>
    import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue';
    import {mapMutations} from 'vuex';
	export default {
		components: {
		 
			ruiDatePicker
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				addressData: {
				},
				array:[],
				ruleId:0,
				//私人定制人规则信息
				privateMakeRule:{
					authorName:undefined,
					beginTime:undefined,
					endTime:undefined,
					shipCost:undefined,
				},
 
				authororcorp:undefined,//出品人信息
				authororcorpItems:[],//私人定制品项信息
				itemName:undefined,//预约项目
				itemMinPrice:0,//最低起价
				itemDingMoney:0,//定金金额
				itemShipCost:0,//运费金额
				itemFinishDays:undefined,//项目周期
				itemIndex: 0,
				privateDeliverDate:currentDate,//私人定制交付时间
				ruleBeginTime:undefined,
				ruleEndTime:undefined,
				privateContentDesc:undefined,//私人定制内容描述
				privateRemark:undefined,//私人定制特别备注
				privateUploadPic:undefined,//私人定制上传图
				submiting:false,//提交状态
				
				// ruleDesc:'平台方负责线下撮合，并居间担保，三方以诚信为本。预约金按最低起价支付，
				// 最终费用增加部分在三方签署合同时确认。如果定制服务购买方和提供方
				// 未达成协议，平台方将退还所有费用给服务购买方。一旦双方签署协议，则平台方会收取相应的服务费用。
				// 平台方依照合同的执行情况，根据双方协商进行费用的结算支付。'
			 
			}
		},
		onLoad(options){
			this.ruleId=options.id;
			//加载预定规则ID
			this.loadData(this.ruleId)
			this.loadAddressData();

		},
		
		methods: {
			...mapMutations(['login']),
			loadAddressData(){
			  var that=this;
			  var addressId = that.addressData.id;
			  that.$http({           //调用接口
			  	method:'GET',
			  	params:{
			  		addressId:addressId
			  	},
			  	 url:that.global.target+"/wx/address/getAddressData"  //this指data
			  }).then(function(response){  //接口返回数据
			     that.addressData=response.data.data;
			  	// console.log( response); 
			   })
			},
			bindItemsChange(val){
				var that=this;
				let index=Number(val.detail.value);
			 //    if(index==null){
				// 	return
				// }
				that.itemName=that.authororcorpItems[index]["itemName"]
				that.itemMinPrice=that.authororcorpItems[index]["itemMinPrice"]
				that.itemDingMoney=that.authororcorpItems[index]["itemDingMoney"]
				that.itemShipCost=that.authororcorpItems[index]["itemShipCost"]
				that.itemFinishDays=that.authororcorpItems[index]["itemFinishDays"]
				this.$forceUpdate()
				// console.log(val.detail)
				// console.log(this.itemIndex)
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(id) {//type 标识是否需要重新计算分页	  
				var that=this;
				let userInfo = uni.getStorageSync('userInfo');
				that.$http({           //调用接口
					method:'GET',
					params:{
						id:id,
						userId:userInfo.id
					},
					 url:that.global.target+"/wx/privateMake/privateMakeDetail"  //this指data
				}).then(function(response){  //接口返回数据
					// console.log( response); 
				 
				    that.privateMakeRule=response.data.data.privateMakeRule;
					that.ruleBeginTime=that.privateMakeRule.beginTime.substr(0,10);
					that.ruleEndTime=that.privateMakeRule.endTime.substr(0,10);
				    that.privateMakeOrderList=response.data.data.privateMakeOrderList;
					that.authororcorp=response.data.data.authororcorp;
					that.authororcorpParas=response.data.data.authororcorpParas;
					that.authororcorpItems=response.data.data.authororcorpItems;
					console.log(that.authororcorpItems)
					if(that.authororcorpItems!=null&&that.authororcorpItems.length>0){
						that.itemName=that.authororcorpItems[0].itemName
						that.itemMinPrice=that.authororcorpItems[0].itemMinPrice
						that.itemDingMoney=that.authororcorpItems[0].itemDingMoney
						that.itemShipCost=that.authororcorpItems[0].itemShipCost
						that.itemFinishDays=that.authororcorpItems[0].itemFinishDays
						that.authororcorpItems.forEach(
						  (item)=>{
							that.array.push(item.itemName)
						 }
						)
					}
							 
							

					//uni.hideLoading()
				},function(error){
					//uni.hideLoading()
				}) 
			},
			bindDateChange: function(e) {
				this.privateDeliverDate = e.target.value;
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value);
				this.index = e.target.value;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//显示优惠券面板
			toggleMask(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(()=>{
					this.maskState = state;
				}, timer)
			},
			numberChange(data) {
				this.number = data.number;
			},
			changePayType(type){
				this.payType = type;
			},
			submit(){
				if(this.submiting){
					this.$api.msg("已经提交,正在处理,不能重复提交!");
					return;
				}
			    //判断地址是否为空
				if(this.addressData==null||this.addressData.id==null){
					this.$api.msg("请选选择收货地址")
					return;
				}
				//判断是否是会员，
				
				//调用订单创建接口，创建订单，并转移到支付接口
				var that=this;
				
				uni.showLoading()
				that.submiting=true;
				that.$http({ //调用接口
					method: 'POST',
					url: that.global.target + "/wx/auth/checkToken" //this指data
				}).then(function(response) { //接口返回数据
					 console.log(response)
					var result = response.data;
					if (result.errno != 0){
						that.submiting=false;
						uni.hideLoading()
						that.$api.msg(result.errmsg);
						return;
					}
					that.login(result.data);
					let userInfo = uni.getStorageSync('userInfo');
					//如果没有获取到用户手机号，则要求用户进行注册
					if(userInfo.mobile==null||userInfo.mobile==''){
						that.submiting=false;
						uni.hideLoading()
						that.navToLogin();
						return;
					}
				
					var makeOrder={
						addressId:that.addressData.id,
						ruleMxId:that.ruleId,
						privateItemName:that.itemName,
						privateDeliverDate:that.privateDeliverDate,
						privateContentDesc:that.privateContentDesc,
						privateRemark:that.privateRemark,
						privateUploadPic:that.privateUploadPic,
						prePayMoney:that.itemDingMoney,//定金金额
						shipCostMoney:that.itemShipCost,//运费金额
					}
					that.$http({           //调用接口
						method:'POST',
						data:makeOrder,
						url:that.global.target+"/wx/privateMake/submitPrivateMake"  //this指data
					}).then(function(response){  //接口返回数据
					   var result=response.data;
					   var payMoney=that.itemDingMoney+that.itemShipCost
					   if(result.errno==0){
						   var orderId=result.data.id
						   var orderSn=result.data.orderSn
						   if(payMoney>0)
						   {
						   	uni.redirectTo({
						   		url: '/pages/money/pay?orderId=' + orderId + '&pay=' +
								payMoney + '&ordersn=' + orderSn
						   	})
						   } else
						   {
						   	uni.navigateTo({
						   		url: '/pages/money/paySuccess?price='+payMoney+
								'&orderid='+orderId
						   	})
						   }
						   
						    
					   } else
					   {
						   that.submiting=false;
						   uni.hideLoading()
						   that.$api.msg(result.errmsg)
						   return;
					   }
						// console.log( response); 
					})
				})	
			
			},
			stopPrevent(){}
			
			// // 以下处理文件上传
			// async submit(){  
			// 	this.form.imgs=await this.uploads() 
			// 	this.$api.http.post('/add_record',this.form).then(res=>{    
			// 	})
			// },
			// //小程序不支持多文件上传 
			// async uploads(){ 
			// 	const that=this     
			// 	let arr=[]
			// 	for (let k in that.imgList) {
			// 		arr[k]=await that.up_img(that.imgList[k])
			// 	} 
			// 	return arr;
			// },
			// up_img(url){ 
			// 	return new Promise((resolve, reject) => {  
			// 		uni.uploadFile({
			// 			url: 'https://xxx.com/up_img', //仅为示例，非真实的接口地址
			// 			filePath: url,
			// 			name: 'img',
			// 			header: {
			// 				token:uni.getStorageSync("token")
			// 			},
			// 			formData: {
			// 				'user': 'test'
			// 			},
			// 			success: (uploadFileRes) => { 
			// 				resolve(uploadFileRes.data);  
			// 			}
			// 		});
			// 	})  
			// },
			// ChooseImage() {
			// 	uni.chooseImage({
			// 		count: 20, //默认9
			// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 		sourceType: ['album'], //从相册选择
			// 		success: (res) => {
			// 			if (this.imgList.length != 0) {
			// 				this.imgList = this.imgList.concat(res.tempFilePaths)
			// 			} else {
			// 				this.imgList = res.tempFilePaths
			// 			} 
			// 		}
			// 	});
			// },
			// ViewImage(e) {
			// 	uni.previewImage({
			// 		urls: this.imgList,
			// 		current: e.currentTarget.dataset.url
			// 	});
			// },
			// DelImg(e) {
			// 	uni.showModal({
			// 		title: '删除',
			// 		content: '确定要删除吗？',
			// 		cancelText: '否',
			// 		confirmText: '是',
			// 		success: res => {
			// 			if (res.confirm) {
			// 				this.imgList.splice(e.currentTarget.dataset.index, 1)
			// 			}
			// 		}
			// 	})
			// }
			
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100upx;
	}

.c-list {
	margin-top: 16upx;
	font-size: $font-sm + 2upx;
	color: $font-color-base;
	background: #fff;
	.c-row {
		display: flex;
		align-items: center;
		padding: 15upx 30upx;
		position: relative;
	}
	.e-header {
		padding: 20upx 30upx;
		display: flex;
		align-items: center;
		height: 70upx;
		font-size: $font-sm + 2upx;
		color: $font-color-light;
		.tit {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right: 4upx;
		}
		.tip {
			flex: 1;
			text-align: right;
		}
		.icon-you {
			margin-left: 10upx;
		}
	}
	.tit {
		width: 150upx;
	}
	.con {
		flex: 1;
		color: $font-color-dark;
		.selected-text {
			margin-right: 10upx;
		}
	}
	.bz-list {
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
		text {
			display: inline-block;
			margin-right: 30upx;
		}
	}
	.con-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: $font-color-dark;
		line-height: 40upx;
	}
	.red {
		color: $uni-color-primary;
	}
}

	.address-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}

		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}

	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 10upx;

				.price {
					margin-bottom: 4upx;
				}
				.number{
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}
	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $font-color-light;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-dark;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}
			&.red{
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}
	
	/* 支付列表 */
	.pay-list{
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;
		.pay-item{
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;	
			position: relative;
		}
		.icon-weixinzhifu{
			width: 80upx;
			font-size: 40upx;
			color: #6BCC03;
		}
		.icon-alipay{
			width: 80upx;
			font-size: 40upx;
			color: #06B4FD;
		}
		.icon-xuanzhong2{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: $base-color;
		}
		.tit{
			font-size: 32upx;
			color: $font-color-dark;
			flex: 1;
		}
	}
	
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0,0,0,.1);
		.price-content{
			padding-left: 30upx;
		}
		.price-tip{
			color: $base-color;
			margin-left: 8upx;
		}
		.price{
			font-size: 36upx;
			color: $base-color;
		}
		.submit{
			display:flex;
			align-items:center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
			background-color: $base-color;
		}
	}
	
	/* 优惠券面板 */
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 9995;
		transition: .3s;
		
		.mask-content{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.mask-content{
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item{
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;
		.con{
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;
			&:after{
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}
		.title{
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}
		.time{
			font-size: 24upx;
			color: $font-color-light;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}
		.price{
			font-size: 44upx;
			color: $base-color;
			&:before{
				content: '￥';
				font-size: 34upx;
			}
		}
		.tips{
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}
		.circle{
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;
			&.r{
				left: auto;
				right: -6upx;
			}
		}
	}

</style>
